<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现全选/取消/反选按钮</title>
</head>
<body>
<div>
    <div>
        <label for="h1">篮球</label>
        <input type="checkbox" name="ball" value="0" id="h1" class="ball">
    </div>
    <div>
        <label for="h2">足球</label>
        <input type="checkbox" name="ball" value="1" id="h2" class="ball">
    </div>
    <div>
        <label for="h3">双色球</label>
        <input type="checkbox" name="ball" value="2" id="h3" class="ball">
    </div>
</div>
<div>
    <button id="b1">全选</button>
</div>
<div>
    <button id="b2">取消</button>
</div>
<div>
    <button id="b3">反选</button>
</div>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script>
    $("#b1").on("click", function () {
            $(".ball").prop("checked", true);
        }
    )

    $("#b2").on("click", function () {
            $(".ball").prop("checked", false);
        }
    )

    $("#b3").on("click", function () {
        $(".ball").each(function () {
            $(this).prop("checked",!$(this).prop("checked"))
            }
        )
        }
    )
</script>
</html>